<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/4</title>
    <script src="https://cdn.bootcss.com/vue/2.5.18-beta.0/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
</head>
<body>
    <div id="root">
        <input type="text" v-model="searchText" @input="fn">
        <p v-for="item in searchRes">{{item.username}}--{{item.tel}}</p>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            searchText: '',
            searchRes: []
        },
        methods: {
            fn() {
                let selt = this;
                clearTimeout(this.timer);
                this.timer = setTimeout( () => {
                    if (selt.searchText !=='') {
                        $.ajax({
                            url: 'http://localhost:8080/search',
                            method: 'get',
                            dataType: 'json',
                            data: {
                                searchText: this.searchText
                            }
                        }).then( data => {selt.searchRes = data.data} )
                            .catch(error => console.log(error))
                    }
                },1000)
            },
        },
        method: {

        }
    })
</script>
</html>
